<template>
    <div>
        <el-card class="crumbs-card">
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/main/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/main/first' }">订单列表</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </el-card>
        <el-card class="container">
            <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="用户名">
            <el-input placeholder="用户名" v-model="queryName">
            </el-input>
            </el-form-item>
                <el-form-item  label=" 下单状态 " >
                    <el-select placeholder="下单状态" v-model="queryoState">
                        <el-option value="" label="所有"></el-option>
                        <el-option label="已下单" value="1"></el-option>
                        <el-option label="未下单" value="2"></el-option>
                    </el-select>
                </el-form-item>
                    <el-form-item  label=" 入住状态 " >
                    <el-select placeholder="入住状态" v-model="queryinState">
                        <el-option value="" label="所有"></el-option>
                        <el-option label="已入住" value="1"></el-option>
                        <el-option label="未入住" value="2"></el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item  label=" 支付状态 " >
                     <el-select placeholder="支付状态" v-model="querypState">
                         <el-option value="" label="所有"></el-option>
                         <el-option label="已支付" value="1"></el-option>
                         <el-option label="未支付" value="2"></el-option>
                     </el-select>
                    </el-form-item>
                <el-form-item  label=" 退房状态 " >
                    <el-select placeholder="退房状态" v-model="queryoutState">
                        <el-option value="" label="所有"></el-option>
                        <el-option label="已退房" value="1"></el-option>
                        <el-option label="未退房" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  label=" 退款状态 " >
                    <el-select placeholder="退款状态" v-model="queryBack">
                        <el-option value="" label="所有"></el-option>
                        <el-option label="已退款" value="1"></el-option>
                        <el-option label="未退款" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  label=" 入住人数 " >
                    <el-select placeholder="入住人数" v-model="queryinNum">
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input placeholder="价格" v-model="queryPrice">
                    </el-input>
                </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="onSubmit()">查询</el-button>
            </el-form-item>
            </el-form>
            <el-table
                    :data="orderList"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="ostate"
                        label="下单状态"
                        width="180">
                    <template slot-scope="scope">
                        {{scope.row.ostate === 1?'已下单':'未下单'}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="inState"
                        label="入住状态"
                        width="180">
                    <template slot-scope="scope">
                        {{scope.row.inState === 1?'已入住':'未入住'}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="pstate"
                        label="支付状态"
                        width="180">
                    <template slot-scope="scope">
                        {{scope.row.pstate === 1?'已支付':'未支付'}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="outState"
                        label="退房状态"
                        width="180">
                    <template slot-scope="scope">
                        {{scope.row.outState === 1?'已退房':'未退房'}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="back"
                        label="退款状态"
                        width="180">
                    <template slot-scope="scope">
                        {{scope.row.back === 1?'已退款':'未退款'}}
                        {{scope.row.back === null ? '未申请退款':'申请退款'}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="inNum"
                        label="入住人数"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="inTime"
                        label="入住时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="outTime"
                        label="离开时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="orTime"
                        label="下单时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="价格"
                        width="180">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!--<el-button-->
                                <!--size="mini"-->
                                <!--@click="handleEdit(scope.row)">编辑-->
                        <!--</el-button>-->
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.row.id)">退款
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
            @size-change="pageSizeChange"
            @current-change="pageNoChange"
            :background="true"
            :current-page="pageNo"
            :page-sizes="[10, 20, 40,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>import {pageOrderList, checkOrder} from '@api/order'

export default {
  name: 'OrderList',
  data: function () {
    return {
      dialogVisible: false,
      orderList: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      username: '',
      oState: '',
      inState: '',
      pState: '',
      outState: '',
      back: '',
      inNum: '',
      price: '',
      queryName: '',
      queryoState: '',
      queryinState: '',
      querypState: '',
      queryoutState: '',
      queryBack: '',
      queryinNum: '',
      queryPrice: '',
      id: ''
    }
  },
  created () {
    // 页面加载执行
    this.queryOrder()
  },
  methods: {
    onSubmit () {
      pageOrderList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        username: this.queryName,
        oStrate: this.queryType,
        inState: this.queryIdNum,
        pState: this.queryPhoneNum,
        outState: this.queryoutState,
        back: this.queryBack,
        inNum: this.queryinNum,
        price: this.queryPrice
      }).then(res => {
        this.orderList = res.data.records
        this.total = res.data.total
      })
    },
    handleDelete (id) {
      this.$confirm('是否退款', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(id)
        checkOrder(id).then(res => {
          console.log(res)
          if (res.status) {
            this.$message({
              message: '退款成功',
              type: 'success'
            })
            this.queryOrder()
          }
        })
      })
    },
    queryOrder () {
      pageOrderList({pageNo: this.pageNo, pageSize: this.pageSize}).then(res => {
        console.log(res.data.records)
        this.orderList = res.data.records
        this.total = res.data.total
      })
    },
    pageSizeChange (value) {
      console.log(value)
      this.pageSize = value
      this.queryOrder()
    },
    pageNoChange (value) {
      console.log(value)
      this.pageNo = value
      this.queryOrder()
    }

  }

}
</script>
